<script setup>
import { onMounted, onUnmounted, watch } from "vue";
const emit = defineEmits(['getLng'])
const props = defineProps(['address','center','city'])
let map = null;
let placeSearch = null
let position = []
watch(props,(n,v)=>{
    if(placeSearch && n.address){
        placeSearch.search(n.address, function(status, result) {
            emit('getLng',result)
        });
    }
})
watch(()=>props.city,(n,v)=>{
    if(n) {
        map = new AMap.Map("container", {
            zoom: 11, // 初始化地图级别
            center: props.center?.lat? [props.center.lng,props.center.lat] : ['120.201982000000', '30.288045000000']
        });
        placeSearch =  new AMap.PlaceSearch({
            map: map,
            city: n[1],
            pageSize: 10,//每页显示多少行
            pageIndex: 1,//显示的下标从那个开始
            showCover: true,
            citylimit: true
        });
    }
})
onMounted(() => {
    map = new AMap.Map("container", {
        zoom: 11, // 初始化地图级别
        center: props.center?.lat? [props.center.lng,props.center.lat] : ['120.201982000000', '30.288045000000']
    });
    placeSearch =  new AMap.PlaceSearch({
        map: map,
        city: props.city?props.city[1]:'',
        pageSize: 10,//每页显示多少行
        pageIndex: 1,//显示的下标从那个开始
        showCover: true,
        citylimit: true
    });
});
function sendPosition() {
    console.log(position,'position')
    emit('getLng',position)
}
function onError(msg) {
    console.log(msg)
}
onUnmounted(() => {
    map?.destroy();
});
defineExpose({
    sendPosition
})
</script>

<template>
    <div id="container" style="width:100%;height: 300px;"></div>
</template>

<style scoped>
#container {
    width: 100%;
    height: 800px;
}
</style>
